@import (once) "public/variable.less";
@import (once) "modules/login-pop.less";
@import (once) "modules/m-recharge.less";
@import (once) "modules/m-exchange.less";
@import (once) "modules/m-create-family.less";
@import (once) "modules/m-page.less";
.header {
    background: #fff;
    height: 50px;
    border-bottom: 1px solid @bdcolor;
    & .block-logo {
        width: 155px;
        height:51px;
        float: left;
        margin-right: 35px;
        & a{
            max-height: 100%;
            display: table-cell;
            vertical-align: middle;
        }
        & img{
            display: table-cell;
            vertical-align: middle;
        }
    }
    & .block-menu {
        float: left;
        & a {
            padding: 0 5px;
            display: inline-block;
            height: 48px;
            line-height: 48px;
            font-size: @fs-middle;
            margin: 0 10px;
            position: relative;
            &.active {
                &:after{
                        height: 4px;
                        background: @bgcolor-theme;
                        content: " ";
                        width: 100%;
                        display: table;
                        position: absolute;
                        top: 47px;
                        left: 0px;
                        border-top-left-radius: 4px;
                        border-top-right-radius: 4px;
                }
                color: @bgcolor-theme;
            }
            &:hover {
                color: @bgcolor-theme;
            }
        }
    }
    & .block-search {
        float: right;
        margin-top: 13px;
        & .header-input {
            border: 1px solid @bdcolor-input;
            font-size: @fs-small;
            height: 24px;
            line-height:23px; 
            *line-height: 27px;
            border-radius: 3px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: 0;
            padding: 0 13px;
            width: 142px;
            float: left;
            vertical-align: center;
            box-sizing: content-box;
            -moz-box-sizing: content-box;
        }
        & .btn-search {
            color: @bdcolor-input;
            border: 1px solid @bdcolor-input;
            height: 24px;
            line-height: 23px;
            *line-height: 27px;
            display: block;
            padding: 0 8px;
            border-left: 0;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            float: left;
            box-sizing: content-box;
            -moz-box-sizing: content-box;
            & .iconfont {
                font-size: 16px;
                line-height: 27px;
            }
        }
        & .btn {
            font-size: @fs-small;
            padding: 0 12px;
            height: 24px;
            line-height:24px; 
            *line-height: 27px;
            border-radius: 3px;
            margin-left: 10px;
            box-sizing: content-box;
            -moz-box-sizing: content-box;
        }
        & .block-search-user {
            margin-left: 20px;
            display: block;
            float: left;
            position: relative;
            z-index: 990;
            color: @fcolor-lighter;
            font-size: @fs-small;
            margin-top: -2px;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            & .search-user-icon {
                position: relative;
                display: block;
                width: 25px;
                height: 21px;
                line-height: 21px;
                text-align: center;
                & i{
                    width: 25px;
                    height: 21px;
                    line-height: 24px;
                    font-size: 30px;
                    color: #9598a7;
                }
                & span {
                    position: absolute;
                    background: @bgcolor-theme;
                    border-radius: 10px;
                    top:-6px;
                    right: -12px;
                    width: 20px;
                    height: 16px;
                    line-height: 16px;
                    color: #fff;
                }
            }
            & .search-user-name {
                display: block;
                line-height: 24px;
                & img{
                    height: 30px;
                    width: 30px;
                }
                
                & .up {
                    display: none;
                }
            }
            & .search-user {
                width: 200px;
                box-shadow: 0px 3px 5px #dbdbdb; 
                position: absolute;
                top: 45px;
                right: 0;
                background: #fff;
                -webkit-transition: none;
                transition: none;
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
                -webkit-transform-origin: 90% 0;
                -ms-transform-origin: 90% 0;
                transform-origin: 90% 0;
                visibility: hidden;
                & .null {
                    height: 15px;
                    width: 100%;
                    background: transparent;
                    position: absolute;
                    top: -15px;
                    right: 0;
                }
                & .search-user-top {
                    position: absolute;
                    top: -8px;
                    right: 115px;
                }
                & .search-user-info {
                    padding: 13px 15px 13px 15px;
                    border-bottom: 1px solid @bdcolor;
                    & .user-info-img {
                        width: 60px;
                        height: 60px;
                        margin-right: 15px;
                        float: left;
                        & img {
                            margin: 0;
                        }
                    }
                    & .user-info-txt {
                        font-size: @fs-middle;
                        & .logname {
                            padding: 4px 0;
                            display: -webkit-flex;
                            display: flex;
                            -webkit-align-items: center;
                            align-items: center;
                            & a.user-name {
                                line-height: 18px;
                                width: 96px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }
                            & a.icon-btn {
                                color: @fcolor-lighterer;
                                margin-right: 11px;
                                width: 18px;
                                height: 18px;
                                line-height: 18px;
                                & i.uname {
                                    color: #65dca5;
                                    font-size: 18px;
                                    line-height: 18px;
                                }
                                & i.mobile {
                                    color: @bgcolor-theme;
                                }
                            }
                        }
                    }
                }
                & .search-user-grade {
                    border-bottom: 1px solid @bdcolor;
                    padding: 7px 15px;
                    font-size: @fs-main;
                    color: @fcolor-main;
                    & .grade {
                        padding: 15px 0;
                        & .icon-grade {
                            font-size: @fs-small;
                            line-height: 12px;
                            color: @bgcolor-theme;
                            & i {
                                display: block;
                            }
                        }
                        & .progress-grade {
                            background: #4c565e;
                            height: 12px;
                            width: 128px;
                            border-radius: 8px;
                            & .progress-grade-num {
                                background: #00e0b4;
                                width: 30%;
                                font-size: @fs-small;
                                color: #fff;
                                height: 8px;
                                margin: 2px;
                                line-height: 13px;
                                text-align: center;
                                border-radius: 8px;
                            }
                        }
                    }
                }
                & .search-user-money {
                    padding: 10px 15px 0;
                    font-size: @fs-main;
                    color: @fcolor-main;
                    border-bottom: 1px solid @bdcolor;
                    & p {
                        & a {
                            float: right;
                            background: @bgcolor-theme;
                            padding: 0 9px;
                            line-height: 18px;
                            color: #fff;
                            font-size: @fs-small;
                            border-radius: 4px;
                            margin-top:2px;
                            &:hover{
                                background: @bgcolor-light-theme;
                            }
                        }
                    }
                    & .money {
                        padding: 11px 0 17px;
                        & .gift {
                            margin-right: 10px;
                            color: #999;
                            height: 25px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            line-height: 25px;
                            font-size: @fs-small;
                            position: relative;
                            display: -webkit-flex;
                            display: flex;
                            -webkit-align-items: center;
                            align-items: center;
                            & i{
                                font-size: 25px;
                                width: 20px;
                                height: 20px;
                                background: url(../images/icon-user.png) no-repeat;
                                margin-right: 10px;
                            }
                            & i.jewel{
                                background-position: 1px 2px;
                            }
                            & i.ticket{
                                background-position: 1px -25px;
                            }
                            & em {
                                padding: 0 5px;
                            }
                        }
                    }
                }
                & .search-user-data {
                    padding: 11px 15px 9px;
                    border-bottom: 1px solid @bdcolor;
                    & a{
                        display: block;
                        font-size: @fs-main;
                        line-height: 20px;
                        &:hover{
                            color:@bgcolor-theme;
                        }
                    }
                }
                & .search-user-out{
                    & a{
                        display: block;
                        padding: 12px 15px 16px;
                        font-size: @fs-main;
                        line-height: 14px;
                        &:hover{
                            color:@bgcolor-theme;
                        }
                    }
                }
            }
            & .hover {
                visibility: visible;
                opacity: 1;
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
                z-index: 999999999;
                -webkit-transition: all 0.3s cubic-bezier(0.31, 0.57, 0.68, 1.36);
                transition: all 0.3s cubic-bezier(0.31, 0.57, 0.68, 1.36);
            }
        }
    }
}
.wrapper{
    & .m-unlisted{
        padding-bottom: 40px;
        text-align: center;
        & .unlisted-img{
            background: url(../images/not-login.png) no-repeat;
            width: 100%;
            height: 340px;
            margin: 45px auto;
            background-position: 50%;
            background-size: 65%;
        }
        & a{
            padding: 5px 60px;
            font-size: 20px;
            border-radius: 50px;
        }
    }
    
}
